<template>
    <el-pagination  
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    style="margin-top: 15px;"  
    layout="total, sizes, prev, pager, next" 
    background 
    :total=props.total
    :default-page-size="5"
    :page-sizes="[5,10, 20, 50, 100]"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import {defineEmits, defineProps} from 'vue';
var emits= defineEmits()

//获取父组件传来的total，并展示
const props = defineProps({
    total: {
      type: String
    }
  });

//   给父组件传值
function handleSizeChange(size){
    emits('handleSizeChange',size)
}
function handleCurrentChange(page){
    emits('handleCurrentChange',page)
}


const message = ref('Hello, Vue 3!');
onMounted(() => {
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>
<style>
el-pagination {
  margin-bottom: 16px;
}</style>
